<template>
  <div class="fabricationdata">
    <!-- 左边布局 -->
    <el-col :span="17">
      <div class="grid-content bg-purple-dark">
        <div class="titleBtn">
          <div class="saveBtn">
            <el-tooltip class="item" effect="dark" content="保存" placement="top">
              <el-button
                @click="saveProgram"
                v-if="!this.openProgramArray[0]||this.openProgramArray[0]&&Invoking.forFunctionCode('program:updateProgram')"
              >
                <img src="../../assets/images/zhizuo1_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="另存为" placement="top">
              <el-button
                :disabled="disabled"
                @click="OpenSaveAs=true"
                v-if="Invoking.forFunctionCode('program:saveProgram_2')"
              >
                <img src="../../assets/images/zhizuo2_03.png" alt />
              </el-button>
            </el-tooltip>
          </div>
          <div class="saveBtn1">
            <el-tooltip class="item" effect="dark" content="混合" placement="top">
              <el-button @click="mixture">
                <img src="../../assets/images/zhizuo4_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="图片" placement="top">
              <el-button @click="addImg">
                <img src="../../assets/images/zhizuo5_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="视频" placement="top">
              <el-button @click="addv">
                <img src="../../assets/images/zhizuo6_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="文本" placement="top">
              <el-button @click="addText">
                <img src="../../assets/images/zhizuo7_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="流视频" placement="top">
              <el-button @click="Permanent">
                <img src="../../assets/images/zhizuo8_03.png" alt />
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="网页" placement="top">
              <el-button @click="webpage">
                <img src="../../assets/images/zhizuo9_03.png" alt />
              </el-button>
            </el-tooltip>
            <div
              style="display: inline-block;border-left:1.5px dashed #dcdfe6;margin-left: 8px;padding-left: 8px;"
            >
              <el-tooltip class="item" effect="dark" content="区域全屏" placement="top">
                <el-button @click="RegionalFullScreen">
                  <img src="../../assets/images/zhizuo3_03.png" alt />
                </el-button>
              </el-tooltip>
            </div>
            <!-- <el-button type="danger" @click="removeDiv">删除1111111</el-button> -->
          </div>
        </div>
      </div>
      <!-- 初始化选择按钮 -->
      <div>
        <div class="cruxButton" v-if="!overall">
          <el-button
            style="background-color: #4d9ce0;color: #fff"
            icon="el-icon-document"
            @click="openAddMake"
            v-if="Invoking.forFunctionCode('program:saveProgram_2')"
          >新建节目</el-button>
          <el-button
            icon="el-icon-document-add"
            @click="openShowProgram"
            v-if="Invoking.forFunctionCode('program:selectPage_2')"
          >打开节目</el-button>
        </div>
        <div class="drawing" v-else>
          <div class="SizeData">
            <el-select
              v-model="valueSize"
              placeholder="请选择尺寸"
              @change="changeValueSize"
              style="width:150px;"
            >
              <el-option-group label="------横屏------">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
                <!--  <el-option
            v-for="item in addForm.isPass?options1:options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
                ></el-option>-->
              </el-option-group>
              <el-option-group label="------竖屏------">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-option-group>
            </el-select>
            <div class="sizeInput">
              <span>x</span>
              <input type="number" v-model="showArr.x" @blur="putDatax" />
            </div>
            <div class="sizeInput">
              <span>y</span>
              <input type="number" v-model="showArr.y" @blur="putDatay" />
            </div>
            <div class="sizeInput">
              <span>宽</span>
              <input type="number" v-model="showArr.width" @blur="putDataw" />
            </div>
            <div class="sizeInput">
              <span>高</span>
              <input type="number" v-model="showArr.height" @blur="putDatah" />
            </div>
          </div>

          <div class="drawing_box" ref="boxTheSize">
            <div class="drawing_module">
              <div>
                <div class="grid-content bg-purple-dark">
                  <div
                    ref="activityRef"
                    class="activity"
                    :style="{'width':curtain.width+'px','height':curtain.height+'px'}"
                  >
                    <vue-draggable-resizable
                      ref="remove"
                      v-for="(item,key) of arr"
                      :key="key"
                      class="draggable"
                      :w="item.width"
                      :h="item.height"
                      :x="item.x"
                      :y="item.y"
                      @dragging="(x, y)=>onDrag(x, y,key)"
                      @resizing="(x, y, width, height)=>onResize(x, y, width, height,key)"
                      :parent="true"
                      :is-conflict-check="true"
                      @click.native="lookId(key)"
                    >
                      <div
                        ref="generateBoxRef"
                        style="font-size:12px;"
                        @contextmenu.prevent="showDraggablePrevent(key)"
                        @mouseover="mouseenterIncident(key)"
                        @mouseout="mouseleaveIncident(key)"
                        @click="acquireSize(item.areaId)"
                        :class="'generate '+ (remove==key?'selected_draggable':'')"
                        :id="item.areaId"
                        :style="{'background-color':item.color}"
                      >
                        <div class="excursion_box">
                          <span>{{item.areaInfo}}</span>
                          <div
                            class="drawing_module_btn"
                            :id="key"
                            ref="ModuleBtn"
                            :style="{'display':'none'}"
                          >
                            <div>
                              <el-button @click="AddMaterial(item,item.areaId)">添加素材</el-button>
                            </div>
                            <div>
                              <el-button @click="removeDiv(item.areaId)">删除区域</el-button>
                            </div>
                          </div>
                        </div>
                      </div>
                    </vue-draggable-resizable>
                  </div>
                </div>
                <!-- <div class="drawing_mixture">混合区</div> -->
              </div>
            </div>
          </div>
          <!-- <div class="SizeData">
            <el-select v-model="valueSize" placeholder="请选择尺寸" @change="changeValueSize">
              <el-option
                v-for="item in addForm.isPass?options1:options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <div class="sizeInput">
              <span>x</span>
              <input type="number" v-model="showArr.x" @blur="putDatax" />
            </div>
            <div class="sizeInput">
              <span>y</span>
              <input type="number" v-model="showArr.y" @blur="putDatay" />
            </div>
            <div class="sizeInput">
              <span>宽</span>
              <input type="number" v-model="showArr.width" @blur="putDataw" />
            </div>
            <div class="sizeInput">
              <span>高</span>
              <input type="number" v-model="showArr.height" @blur="putDatah" />
            </div>
          </div>-->
        </div>
      </div>
    </el-col>
    <!-- 右边布局 -->
    <el-col :span="7">
      <div class="grid-content bg-purple-light">
        <div class="rightList1">
          <div>
            节目名称：
            <span style="color:#2183d8;font-size:14px;">{{addForm.programName}}</span>
          </div>
          <div>
            节目屏类型：
            <span
              style="color:#2183d8;font-size:14px;"
              v-if="addForm.programName"
            >{{addForm.isPass?"横屏":"竖屏"}}</span>
          </div>
        </div>
        <div class="rightList2">
          <div class="rightList2Head">
            <span>已选素材</span>
            <span>
              <el-button icon="el-icon-delete" circle @click="TheSelectedMaterial"></el-button>
            </span>
          </div>
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
              height="180px"
              ref="refTable1"
              @select="selectListTable"
              @select-all="selectListTable"
              highlight-current-row
              @cell-click="handleCurrentChange"
            >
              <!-- @cell-click="cellClick" -->
              <!-- @selection-change="handleSelectionChange" -->
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="序号"></el-table-column>
              <el-table-column prop="materialName" label="文件名"></el-table-column>
              <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                  <!-- <div class="topDown">
                    <el-tooltip class="item" effect="dark" content="下移" placement="top">
                      <el-button icon="el-icon-bottom" circle @click="moveDown(scope)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="上移" placement="top">
                      <el-button icon="el-icon-top" circle @click="moveUp(scope)"></el-button>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="预览" placement="top">
                      <el-button
                        type="primary"
                        circle
                        @click="openPreviewClick(scope.row)"
                      >
                        <img style="width:18px" src="../../assets/images/yan2_03.png" alt />
                      </el-button>
                    </el-tooltip>
                  </div>-->
                  <el-dropdown>
                    <el-button type="primary" size="mini">
                      操作
                      <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="moveDown(scope)">下移</el-dropdown-item>
                      <el-dropdown-item @click.native="moveUp(scope)">上移</el-dropdown-item>
                      <el-dropdown-item @click.native="openPreviewClick(scope.row)">预览</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="rightList2">
          <div class="rightList2Head">
            <span v-if="clickRow" style="display:flex">
              <!-- {{'【'+clickRow.materialName+'】素材属性'}} -->
              <div>【</div>
              <div
                :title="clickRow.materialName"
                style="max-width:110px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"
              >{{clickRow.materialName}}</div>
              <div>】素材属性</div>
            </span>
            <span v-else>素材属性</span>
            <div>
              <!-- 其他属性 -->
              <el-row v-if="TheMaterialProperties==2||TheMaterialProperties==1">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div class="propertyPaly">
                      <el-input
                        placeholder
                        v-model="videoProperty.playTime"
                        v-if="TheMaterialProperties==2"
                        @blur="preserveMap('t')"
                      >
                        <template slot="prepend">播放时长</template>
                      </el-input>
                      <el-input
                        placeholder
                        v-model="videoProperty.playTime"
                        @blur="preserveMap('t')"
                        v-else
                      >
                        <template slot="prepend">播放时长</template>
                      </el-input>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="propertyPaly">
                    <el-row>
                      <el-col :span="10">
                        <div class="grid-content bg-purple">
                          <div class="propertyPaly_text" v-if="TheMaterialProperties==2">播放音量</div>
                          <div class="propertyPaly_text" v-else>切换效果</div>
                        </div>
                      </el-col>
                      <el-col :span="14">
                        <div class="grid-content bg-purple-light">
                          <div>
                            <el-select
                              v-model="videoProperty.extend.playVoice"
                              placeholder="请选择"
                              v-if="TheMaterialProperties==2"
                              @change="preserveMap"
                            >
                              <el-option
                                v-for="item in videoProperty.palyVolume"
                                :key="item"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                            <el-select
                              v-model="videoProperty.extend.switchMode"
                              placeholder="请选择"
                              @change="preserveMap"
                              v-else
                            >
                              <el-option
                                v-for="item in videoProperty.switchover"
                                :key="item"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <el-row v-if="TheMaterialProperties==4||TheMaterialProperties==5">
                <el-col :span="12">
                  <div class="propertyPaly">
                    <el-row>
                      <el-col :span="10">
                        <div class="grid-content bg-purple">
                          <div class="propertyPaly_text">播放音量</div>
                        </div>
                      </el-col>
                      <el-col :span="14">
                        <div class="grid-content bg-purple-light">
                          <div>
                            <el-select
                              v-model="videoProperty.extend.playVoice"
                              @change="preserveMap"
                              placeholder="请选择"
                            >
                              <el-option
                                v-for="item in videoProperty.palyVolume"
                                :key="item"
                                :label="item"
                                :value="item"
                              ></el-option>
                            </el-select>
                          </div>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
              <!-- 文本属性 -->
              <el-row v-if="TheMaterialProperties==3">
                <el-col :span="12">
                  <div class="grid-content bg-purple">
                    <div class="propertyPaly">
                      <el-input placeholder v-model="textProperty.playTime" @blur="preserveMap">
                        <template slot="prepend">播放时长</template>
                      </el-input>
                    </div>
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">字号</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div>
                              <el-select
                                v-model="textProperty.extend.size"
                                @change="preserveMap"
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="item in textProperty.FontSize"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                ></el-option>
                              </el-select>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">前景色</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div class="colorSelect">
                              <el-color-picker
                                v-model="textProperty.extend.bgcolor"
                                @change="preserveMap"
                              ></el-color-picker>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">滚动速度</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div>
                              <el-select
                                v-model="textProperty.extend.speed"
                                @change="preserveMap"
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="item in textProperty.speed"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                ></el-option>
                              </el-select>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="grid-content bg-purple-light">
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">字体</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div>
                              <el-select
                                v-model="textProperty.extend.family"
                                @change="preserveMap"
                                placeholder="请选择"
                              >
                                <el-option
                                  v-for="item in textProperty.FontType"
                                  :key="item"
                                  :label="item"
                                  :value="item"
                                ></el-option>
                              </el-select>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">字体色</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div class="colorSelect">
                              <el-color-picker
                                v-model="textProperty.extend.color"
                                @change="preserveMap"
                              ></el-color-picker>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                    <div class="lucency">
                      <div class="ifpass">
                        <div
                          :class="textProperty.extend.transparent==1?'addClass':''"
                          style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
                          @click="textPropertyClick"
                        >透明</div>
                        <div
                          :class="textProperty.extend.transparent==0?'addClass':''"
                          style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
                          @click="textPropertyClick"
                        >不透明</div>
                      </div>
                    </div>
                    <div class="propertyPaly">
                      <el-row>
                        <el-col :span="10">
                          <div class="grid-content bg-purple">
                            <div class="propertyPaly_text">滚动方向</div>
                          </div>
                        </el-col>
                        <el-col :span="14">
                          <div class="grid-content bg-purple-light">
                            <div>
                              <el-select
                                v-model="textProperty.extend.direction"
                                placeholder="请选择"
                                @change="preserveMap"
                              >
                                <el-option
                                  v-for="item in textProperty.direction"
                                  :key="item.value"
                                  :label="item.label"
                                  :value="item.value"
                                ></el-option>
                              </el-select>
                            </div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-row style="display: none">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div style="height: 500px; width: 100%; border: 1px solid red; position: relative;">
            <vue-draggable-resizable
              ref="remove"
              v-for="(item,key) of arr"
              :key="key"
              class="draggable"
              :w="item.width"
              :h="item.height"
              :x="item.x"
              :y="item.y"
              @dragging="(x, y)=>onDrag(x, y,key)"
              @resizing="(x, y, width, height)=>onResize(x, y, width, height,key)"
              :parent="true"
              @click.native="lookId(key)"
            >
              <p style="font-size:12px;">{{item.name}}</p>
            </vue-draggable-resizable>
          </div>
        </div>
      </el-col>
    </el-row>
    <div style="display: none">
      <span class="inputStyel">
        <span>
          X:
          <input type="number" v-model="showArr.x" @blur="putDatax" />
        </span>
        <span>
          Y:
          <input type="number" v-model="showArr.y" @blur="putDatay" />
        </span>
        <span>
          Width:
          <input type="number" v-model="showArr.width" @blur="putDataw" />
        </span>
        <span>
          Height:
          <input type="number" v-model="showArr.height" @blur="putDatah" />
        </span>
      </span>
    </div>
    <!-- 点击新建弹框 -->
    <el-dialog
      title="创建新节目"
      :visible.sync="addDialogMake"
      width="600px"
      @close="closeAddDialogMake"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <el-steps :active="active">
            <el-step></el-step>
            <el-step></el-step>
          </el-steps>
          <!-- 名称尺寸 -->
          <div class="addDialogForm" v-if="!ifNextStep">
            <el-form ref="form" :model="addForm" label-width="100px">
              <el-form-item label="新节目名称" style="position: relative;">
                <el-input
                  v-model="addForm.programName"
                  style="width:55%"
                  placeholder="请输入节目名称"
                  @input="blurProgramName"
                  clearable
                ></el-input>
                <div class="ifpass">
                  <div
                    :class="addForm.isPass==false?'':'addClass'"
                    style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
                    @click="isPassClick"
                  >横屏</div>
                  <div
                    :class="addForm.isPass==true?'':'addClass'"
                    style="color: #4d9ce0;height: 39px;box-sizing: border-box;float: left;width: 50%;background-color: #f2faff;border: 1px solid #4d9ce0;"
                    @click="isPassClick"
                  >竖屏</div>
                </div>
              </el-form-item>
              <el-form-item label="分辨率">
                <el-select
                  v-model="addForm.regionSize"
                  placeholder="请选择分辨率尺寸"
                  style="width:100%"
                  clearable
                >
                  <!-- 横屏 -->
                  <el-option
                    :label="itemm.label"
                    :value="itemm.value"
                    v-for="(itemm,indexx) of addForm.isPass?options1:options2"
                    :key="indexx"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="formButton">
                <el-button style="background-color: #4d9ce0;color: #fff" @click="nextStep">下一步</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!-- 下一步de操作 -->
          <div class="sample" v-else>
            <ul class="sampleUl">
              <li @click="layoutBox1" :class="[ifClick.ifClick1==true?'stlyeBox':'']">
                <div class="sampleUl_box"></div>
              </li>
              <li @click="layoutBox2" :class="[ifClick.ifClick2==true?'stlyeBox':'']">
                <div class="sampleUl_box1">
                  <div class="box1_box"></div>
                </div>
              </li>
              <li @click="layoutBox3" :class="[ifClick.ifClick3==true?'stlyeBox':'']">
                <div class="sampleUl_box2">
                  <div class="box2_box"></div>
                </div>
              </li>
              <li @click="layoutBox4" :class="[ifClick.ifClick4==true?'stlyeBox':'']">
                <div class="sampleUl_box3">
                  <div class="box3_box1"></div>
                  <div></div>
                  <div class="box3_box2"></div>
                  <div></div>
                </div>
              </li>
            </ul>
            <ul class="sampleUl_text">
              <li>整屏</li>
              <li>一分屏</li>
              <li>二分屏</li>
              <li>三分屏</li>
            </ul>
            <div class="sample_btn">
              <el-button
                style="background-color: #4d9ce0;color: #fff"
                @click="accuracy"
                v-if="Invoking.forFunctionCode('programtemplate:useTemplate')"
              >使用该模板</el-button>
              <el-button style="background-color: #eee;" @click="nonuseModle">不使用模板</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 打开节目 -->
    <el-dialog
      title="打开节目"
      :visible.sync="openProgram"
      width="820px"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div>
            <div class="Material_r">
              <el-input placeholder="请输入关键字" v-model="sosoInput" clearable @clear="openShowProgram"></el-input>
              <el-button type="primary" icon="el-icon-search" @click="searchProgram">搜索</el-button>
            </div>
            <!-- <el-table
              stripe
              :data="openProgramData"
              style="width: 100%"
              border
              height="250px"
              @select="checkProgram"
            >-->
            <zycm-table
              @zyLoadData="loadData"
              zy-table-ref="media_group_FabricationData_table"
              :zy-table-data="tabledataList"
              zy-table-height="300px"
              zy-border
              zy-table-select-type="checkbox"
              @zyTableSelect="tableSelect"
              zy-layout="prev,pager, next,total,sizes"
            >
              <!-- <el-table-column type="selection" width="55"></el-table-column> -->
              <el-table-column prop="programName" label="节目名称"></el-table-column>
              <el-table-column prop="totalSize" label="大小" width="90"></el-table-column>
              <el-table-column prop="areaNum" label="区域数" width="60"></el-table-column>
              <el-table-column prop="programWidth" label="节目宽高">
                <template slot-scope="scope">
                  <div>
                    <span>{{scope.row.screenType==1?'横屏':'竖屏'}}</span>
                    <span>{{'('+scope.row.programWidth+'*'+scope.row.programHeight+')'}}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="创建人" width="70"></el-table-column>
              <el-table-column prop="createTime" label="创建时间">
                <template slot-scope="scope">
                  <div>{{scope.row.createTime | dateFormat}}</div>
                </template>
              </el-table-column>
            </zycm-table>
            <!-- </el-table>
            <div class="pagination">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[10, 20, 40, 50]"
                :pager-count="5"
                :page-size="query.pageSize"
                layout=" prev, pager, next, total,jumper,sizes"
                :total="parseInt(query.total)"
              ></el-pagination>
            </div>-->
            <div class="programBtn">
              <el-button type="primary" @click="confirmProgram">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 另存 -->
    <el-dialog
      title="另存为"
      :visible.sync="OpenSaveAs"
      width="500px"
      v-dialogDrag
      ref="dialog__wrapper"
      :close-on-click-modal="false"
    >
      <div class="dialog-body">
        <div class="line">
          <div class="addDialogForm">
            <el-form ref="form" :model="addForm" label-width="120px" style="padding: 20px 0 0;">
              <el-form-item label="另存节目名称" style="position: relative;">
                <el-input
                  @input="blurProgramName"
                  v-model="addForm.programName"
                  style="width:100%"
                  placeholder="请输入节目名称"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item class="formButton" style="padding: 0 40px 0 0;">
                <el-button style="background-color: #4d9ce0;color: #fff" @click="ClickOpenSaveAs">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </el-dialog>
    <SelectData
      v-bind:openDialogTable="openDialogTable"
      v-bind:MaterialType="MaterialType"
      @returnList="returnList"
      @empty="empty"
    ></SelectData>
    <preview :previewList="previewList" ref="showMaterial"></preview>
  </div>
</template>


<script>
// import SelectData from "../../components/ProgramData/Popout/SelectData";
// import VueDraggableResizable from "vue-draggable-resizable";
// import preview from "../../components/preview/preview.vue";
// import $ from "jquery";
export default {
  components: {
    VueDraggableResizable,
    SelectData,
    preview,
  },
  data: function () {
    return {
      // 另存为的弹框
      previewList: "",
      OpenSaveAs: false,
      // 判断是否开启另存为的按钮
      disabled: true,
      overall: false,
      // 打开开发
      sosoInput: "",
      currentPage4: 10,
      optionsValue1: "",
      // 文本属性
      textProperty: {
        playTime: "",
        FontSize: [12, 14, 16, 18, 20, 24, 50],
        FontType: ["微软雅黑", "宋体", "楷体", "黑体", "隶书"],
        speed: [1, 2, 3, 4, 5, 6],
        direction: [
          { label: "静止", value: 0 },
          { label: "从上至下", value: 1 },
          { label: "从左至右", value: 2 },
        ],
        extend: {
          direction: "静止",
          size: 50,
          family: "宋体",
          color: "#ff0000",
          bgcolor: "#000000",
          transparent: 0,
          speed: 4,
          direction: 0,
        },
        materialId: "",
        materialOrder: "",
      },
      // 图片属性 // 视频属性：// 流媒体属性// 网页属性
      videoProperty: {
        playTime: "",
        palyVolume: [0, 5, 10, 20, 40, 60, 80, 100],
        // palyVolumedData: 10,
        switchover: [
          "标准",
          "切换",
          "立方体入",
          "立方体出",
          "垂直翻转",
          "水平翻转",
          "淡入淡出",
          "盒状收缩",
          "盒状展开",
          "向上旋转",
        ],
        // switchoverData: "标准",
        extend: {
          playVoice: "",
          switchMode: "标准",
        },
        materialId: "",
        materialOrder: "",
        areaId: "",
      },
      options1: [
        {
          value: "5000*5000",
          label: "5000*5000",
        },
        {
          value: "2000*2000",
          label: "2000*2000",
        },
        {
          value: "1920*1080",
          label: "1920*1080",
        },
        {
          value: "1694*544",
          label: "1694*544",
        },
        {
          value: "1920*900",
          label: "1920*900",
        },
        {
          value: "1366*726",
          label: "1366*726",
        },
        {
          value: "1600*900",
          label: "1600*900",
        },
        {
          value: "1400*900",
          label: "1400*900",
        },
        {
          value: "1366*768",
          label: "1366*768",
        },
        {
          value: "1280*1024",
          label: "1280*1024",
        },
        {
          value: "1280*720",
          label: "1280*720",
        },
        {
          value: "1024*768",
          label: "1024*768",
        },
        {
          value: "800*600",
          label: "800*600",
        },
      ],
      options2: [
        {
          value: "1080*1920",
          label: "1080*1920",
        },
        {
          value: "1050*1680",
          label: "1050*1680",
        },
        {
          value: "900*1400",
          label: "900*1400",
        },
        {
          value: "768*1024",
          label: "768*1024",
        },
        {
          value: "600*800",
          label: "600*800",
        },
        {
          value: "500*600",
          label: "500*600",
        },
        {
          value: "480*600",
          label: "480*600",
        },
        {
          value: "300*400",
          label: "300*400",
        },
        {
          value: "100*200",
          label: "100*200",
        },
      ],
      tableData: [],
      arrLength: [],
      // 打开节目
      openProgram: false,
      // 打开数据选择弹框
      openDialogTable: false,
      openProgram: false,
      valueSize: "",
      // 判断是否被点击
      result: "",
      ifClick: {
        ifClick1: false,
        ifClick2: false,
        ifClick3: false,
        ifClick4: false,
      },
      // 判断是否下一步
      ifNextStep: false,
      active: 1,
      // 新增弹框数据
      addForm: {
        programName: "",
        regionSize: "",
        desc: "",
        isPass: true,
        programId: "",
      },
      addDialogMake: false,
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      arr: [],
      showArr: {
        height: 0,
        width: 0,
        x: 0,
        y: 0,
      },
      remove: "",
      // 用于鼠标移入后的删除id
      mouseenterId: "",
      // 需要展示的幕布数据
      curtain: {
        width: "",
        height: "",
      },
      judgeShow: true,
      // 添加素材判断类型
      MaterialType: "",
      // 当前需要绑定已选素材的Id
      materialKey: "",
      tableDataTest: [],
      // 目前的素材属性，
      TheMaterialProperties: "",
      // 识别号
      keyId: 1,
      RemoveSelectionArray: [],
      // 重点比例尺数字
      proportion: "",
      // map数据
      map1: new Map(),
      // 属性map
      property: new Map(),
      // 属性mapKey
      propertyKey: "",
      // 打开节目列表
      openProgramData: [],
      query: {
        page: 1,
        pageSize: 10,
        total: "",
      },
      openProgramArray: [],
      // 占时存放修改节目数据的list
      ModifyTheProgram: [],
      repetition: false,
      showProgramName: "",
      thisFormData: new FormData(),
      tabledataList: [], //保存当页的所有table数据
      tablePageList: [], //保存对应table的page数据
      clickRow: "",
    };
  },
  watch: {
    // 监听数组数据是否偏移
    arr(newVal, oldVal) {
      if (!this.judgeShow) {
        return;
      }
      if (this.openProgramArray.length > 0) {
        setTimeout(() => {
          newVal.forEach((element, index) => {
            for (let i = 0; i < this.arrLength.length; i++) {
              if (this.arrLength[i].programId !== element.programId) {
                element.x = element.x + 10;
                element.y = element.y + 10;
                this.showArr.x = element.x * this.proportion;
                this.showArr.y = element.y * this.proportion;
                return;
              } else {
                return;
              }
            }
          });
        }, 10);
        return;
      }
      setTimeout(() => {
        newVal.forEach((element, index) => {
          element.x = element.x + 10;
          element.y = element.y + 10;
          this.showArr.x = element.x * this.proportion;
          this.showArr.y = element.y * this.proportion;
        });
      }, 10);
    },
    openProgram(newVal) {
      this.programList();
    },
    proportion(newVal) {
      if (this.ModifyTheProgram.length < 1) {
        return;
      }
      this.ModifyTheProgram.forEach((element) => {
        element.height = parseFloat(element.height / newVal);
        element.width = parseFloat(element.width / newVal);
        element.x = parseFloat(element.x / newVal);
        element.y = parseFloat(element.y / newVal);
        if (element.areaType == 1) {
          element.color = "#f24c4c";
          element.areaInfo = "图片";
        } else if (element.areaType == 2) {
          element.color = "pink";
          element.areaInfo = "视频";
        } else if (element.areaType == 3) {
          element.color = "#59cd80";
          element.areaInfo = "文本";
        } else if (element.areaType == 4) {
          element.color = "#9b82d5";
          element.areaInfo = "流媒体";
        } else if (element.areaType == 6) {
          element.color = "#fed459";
          element.areaInfo = "网页";
        } else if (element.areaType == 9) {
          element.color = "#4d9ce0";
          element.areaInfo = "混合";
        }
      });
      this.arr = this.ModifyTheProgram;
      this.arrLength = this.ModifyTheProgram;
      this.ModifyTheProgram = [];
    },
  },
  methods: {
    handleCurrentChange(currentRow, oldCurrentRow) {
      var arr = [currentRow];
      this.selectListTable(arr, currentRow, "open");
    },
    // 点击预览
    openPreviewClick(e) {
      this.$refs.showMaterial.openWin(e);
    },
    //给子组件刷新用
    async loadData(formData, tableRef) {
      //提前修正isReqData状态 后续赋值随时会触发table组件的computed  后面还要进行一次修正
      for (let key in this.tabledataList) {
        if (this.tabledataList[key].ref === tableRef) {
          this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
        } else {
          this.tabledataList[key].isReqData = false;
        }
      }

      //子组件触发查询时  处理查询的参数
      if (this.tablePageList[tableRef]) {
        this.tablePageList[tableRef].set("page", formData.get("page"));
        this.tablePageList[tableRef].set("pageSize", formData.get("pageSize"));
      }

      let res;
      if (tableRef == "media_group_FabricationData_table") {
        //发布-选择节目列表
        res = await this.$http.post(
          "program/selectPage",
          this.tablePageList[tableRef]
        );
        //每次请求数据后 清空选中数据
        // this.ProgramSelectList = [];
      }

      if (res && res.data.result === "success") {
        //记录更新分页数据
        res.data.ref = tableRef;
        //更新记录
        let sign = 0;
        for (let key in this.tabledataList) {
          if (this.tabledataList[key].ref === tableRef) {
            if (sign > 1) {
              //去掉重复数据
              this.tabledataList.splice(key, 1);
            } else {
              this.tabledataList.splice(key, 1, res.data);
              this.tabledataList[key].isReqData = true; //标记更新数据的状态 组件中会根据此判断是否重新更新数据
            }
            sign++;
          } else {
            this.tabledataList[key].isReqData = false;
          }
        }
        if (sign == 0) {
          //没有初始化时
          res.data.isReqData = true;
          this.tabledataList.push(res.data);
        }
      } else {
        if (res && res.data.result === "error") {
          this.$message({
            type: "error",
            message: res.data.message,
          });
        } else {
          this.$message({
            type: "error",
            message: "请求数据出现异常",
          });
        }
      }
    },
    //当页刷新数据
    currentTableLoad(tableRef, firstPage, fd) {
      if (firstPage) {
        //加载第一页数据
        if (!this.tablePageList[tableRef]) {
          this.tablePageList[tableRef] = new FormData();
          this.tablePageList[tableRef].set("pageSize", 10);
        }
        this.tablePageList[tableRef].set("page", 1);
      }
      //如果有其他查询参数 合并处理
      if (fd) {
        for (let item of fd.entries()) {
          this.tablePageList[tableRef].set(item[0], item[1]);
        }
      }
      this.loadData(this.tablePageList[tableRef], tableRef);
    },
    //表格checkbox单点 全选
    tableSelect(selection, row, tableRef) {
      if (tableRef === "media_group_FabricationData_table") {
        this.openProgramArray = selection;
      }
    },
    openShowProgram() {
      this.query.pageSize = 10;
      this.query.page = 1;
      this.sosoInput = "";
      this.openProgramArray = [];
      this.thisFormData.delete("programName", this.sosoInput);
      this.programList();
      this.openProgram = true;
    },
    closeAddDialogMake() {
      this.ifNextStep = false;
      this.addForm.isPass = true;
      this.active = 1;
      // this.showProgramName= "";
      this.addForm.regionSize = "";
      if (!this.valueSize) {
        this.addForm.programName = "";
      }
    },
    // 验证重复名
    async blurProgramName() {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("zycmToken", token);
      formData.append("programName", this.addForm.programName);
      const { data: res } = await this.$http.post(
        "program/checkProgName",
        formData
      );
      if (res.data[0]) {
        this.repetition = true;
        this.$message({
          type: "warning",
          message: "节目名重复",
        });
      } else {
        this.repetition = false;
      }
    },
    empty() {
      this.MaterialType = "";
    },
    // 下移
    moveDown(e) {
      if (e.$index + 1 == this.tableData.length) {
        this.messageText("已到最下层！");
        return;
      }
      this.tableData.splice(
        e.$index + 1,
        1,
        ...this.tableData.splice(e.$index, 1, this.tableData[e.$index + 1])
      );
      this.sortList();
    },
    // 上移
    moveUp(e) {
      if (e.$index == 0) {
        this.messageText("已到最上层！");
        return;
      }
      this.tableData.splice(
        e.$index - 1,
        1,
        ...this.tableData.splice(e.$index, 1, this.tableData[e.$index - 1])
      );
      this.sortList();
    },
    // 重赋值排序
    sortList() {
      var array = [];
      this.tableData.forEach((element, index) => {
        element.materialOrder = index;
        this.property.forEach(function (value, key, map) {
          if (value.materialId == element.materialId) {
            value.materialOrder = element.materialOrder;
            array.push(value);
          }
        });
      });
      array.forEach((element) => {
        this.property.delete(this.materialKey + "_" + element.materialId);
        this.property.set(this.materialKey + "_" + element.materialId, element);
      });
    },
    messageText(e) {
      this.$message({
        message: e,
        type: "warning",
      });
    },
    handleSelectionChange(val) {
      this.$nextTick(() => {
        if (val.length > 1) {
          this.$refs.refTable1.clearSelection();
          this.$refs.refTable1.toggleRowSelection(val[val.length - 1]);
        }
        // if (this.FtpSwitchover) {
        this.RemoveSelectionArray = [];
        if (!val[val.length - 1]) {
          return;
        } else {
          this.RemoveSelectionArray.push(val[val.length - 1]);
        }
      });
    },
    ClickOpenSaveAs() {
      if (this.repetition) {
        this.$message({
          message: "节目名重复",
          type: "warning",
        });
        return;
      }
      if (!this.addForm.programName) {
        this.$message({
          message: "节目名不能为空",
          type: "warning",
        });
        return;
      }
      this.saveProgram();
      this.OpenSaveAs = false;
    },
    // 勾选节目
    // checkProgram(selection, row) {
    //   this.openProgramArray = selection;
    // },
    // 点击确定获取该节目的详细信息
    async confirmProgram() {
      if (this.openProgramArray.length !== 1) {
        this.$message({
          message: "请选择其中一个节目",
          type: "warning",
        });
        return;
      }
      this.overall = true;
      this.openProgram = false;
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("zycmToken", token);
      formData.append("programId", this.openProgramArray[0].programId);
      const { data: res } = await this.$http.post(
        "program/selectByProgramId",
        formData
      );
      this.addForm.programName = res.data.program.programName;
      // this.showProgramName= res.data.program.programName;
      this.addForm.isPass = res.data.program.screenType == 1 ? true : false;
      this.curtain.height = res.data.program.programHeight;
      this.curtain.width = res.data.program.programWidth;
      this.addForm.programId = res.data.program.programId;
      this.valueSize =
        res.data.program.programWidth + "*" + res.data.program.programHeight;
      this.DetermineTheSize();
      this.ModifyTheProgram = res.data.layout;
      let arrayNum = [];
      res.data.layout.forEach((ele1) => {
        res.data.material.forEach((ele2) => {
          if (ele1.areaId == ele2.areaId) {
            this.keyId = ele2.areaId + 1;
            arrayNum.push(ele2);
            this.map1.set(ele1.areaId, arrayNum);
            this.property.set(ele1.areaId + "_" + ele2.materialId, ele2);
          }
        });
        arrayNum = [];
      });
      this.property.forEach(async function (value, key, map) {
        // value.extend = value.extend
        if (value.extend) {
          value.extend = await JSON.parse(value.extend);
        }
      });
      this.disabled = false;
    },
    // 点击搜索节目
    searchProgram() {
      if (!this.sosoInput) {
        this.$message({
          message: "请输入节目名称",
          type: "warning",
        });
        return;
      }
      // this.query.page = 1;
      // this.query.pageSize = 10;
      // this.thisFormData.set("programName", this.sosoInput);
      this.programList();
    },
    // 获取节目列表
    async programList() {
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.set("zycmToken", token);
      formData.set("page", this.query.page);
      formData.set("pageSize", this.query.pageSize);
      formData.set("programName", this.sosoInput);
      this.currentTableLoad(
        "media_group_FabricationData_table",
        true,
        formData
      );
      // const { data: res } = await this.$http.post(
      //   "program/selectPage",
      //   this.thisFormData
      // );
      // this.openProgramData = res.dataList;
      // this.query.total = res.total;
      // this.query.pageSize = res.pageSize;
      // this.query.page = res.page;
    },
    // 变动属性时实时更新Map
    preserveMap(e) {
      if(e=='t'&&parseFloat(this.videoProperty.playTime)<0){
         this.videoProperty.playTime=0
         this.messageText("播放时长不能低于0");
      }
      if (this.TheMaterialProperties == 1) {
        this.property.set(this.propertyKey, {
          playTime: this.videoProperty.playTime,
          materialId: this.videoProperty.materialId,
          materialOrder: this.materialKey,
          extend: { switchMode: this.videoProperty.extend.switchMode },
        });
      } else if (this.TheMaterialProperties == 2) {
        this.property.set(this.propertyKey, {
          playTime: this.videoProperty.playTime,
          materialId: this.videoProperty.materialId,
          materialOrder: this.materialKey,
          extend: { playVoice: this.videoProperty.extend.playVoice },
        });
      } else if (this.TheMaterialProperties == 5) {
        this.property.set(this.propertyKey, {
          materialId: this.videoProperty.materialId,
          materialOrder: this.materialKey,
          extend: { playVoice: this.videoProperty.extend.playVoice },
        });
      } else if (this.TheMaterialProperties == 4) {
        this.property.set(this.propertyKey, {
          materialId: this.videoProperty.materialId,
          materialOrder: this.materialKey,
          extend: { playVoice: this.videoProperty.extend.playVoice },
        });
      } else if (this.TheMaterialProperties == 3) {
        this.property.set(this.propertyKey, {
          playTime: this.textProperty.playTime,
          materialId: this.textProperty.materialId,
          materialOrder: this.materialKey,
          extend: {
            size: this.textProperty.extend.size,
            family: this.textProperty.extend.family,
            color: this.textProperty.extend.color,
            bgcolor: this.textProperty.extend.bgcolor,
            speed: this.textProperty.extend.speed,
            direction: this.textProperty.extend.direction,
            transparent: this.textProperty.extend.transparent,
          },
          // isPass: this.textProperty.isPass
        });
      }
    },
    // 点击保存的数据
    async saveProgram() {
      let flag = true;
      let abcd = this.map1;
      this.arr.forEach((eid) => {
        if (!abcd.get(eid.areaId) || abcd.get(eid.areaId).length == 0) {
          flag = false;
          return;
        }
      });
      if (this.addForm.programName == "") {
        this.messageText("请先创建节目");
        return;
      } else if (this.arr.length == 0) {
        this.messageText("请选择模块");
        return;
      } else if (this.property.length == 0) {
        this.messageText("请添加素材");
        return;
      } else if (this.map1.size == 0 || !flag) {
        this.messageText("素材不能为空");
        return;
      }
      // 循环添加排序
      flag = true;
      // 节目基本信息
      let array = this.valueSize.split("*");
      let program = {
        programName: this.addForm.programName,
        programWidth: array[0],
        programHeight: array[1],
        screenType: this.addForm.isPass ? "1" : "2",
        creatorId: sessionStorage.getItem("uid"),
        backgroundId: "",
        backgroundColor: "",
      };
      if (this.addForm.programId) {
        program.programId = this.addForm.programId;
      }
      // 节目布局信息
      let formThead = this.arr;
      formThead.forEach((ele) => {
        ele.x = ele.x * this.proportion;
        ele.y = ele.y * this.proportion;
        ele.height = ele.height * this.proportion;
        ele.width = ele.width * this.proportion;
      });
      for (var i in formThead) {
        if (formThead[i].color) {
          delete formThead[i].color;
        }
      }
      let layout = formThead;
      // 节目素材信息
      let material = [];
      let areaId = "";
      // var inum = 0;
      this.property.forEach(function (value, key, map) {
        areaId = key.split("_");
        value.areaId = areaId[0];
        // value.materialOrder = inum++;
        material.push(value);
      });
      this.property = new Map();
      let token = window.sessionStorage.getItem("token");
      let formData = new FormData();
      formData.append("material", JSON.stringify(material));
      formData.append("program", JSON.stringify(program));
      formData.append("layout", JSON.stringify(layout));
      formData.append("zycmToken", token);
      let dataUrl = "";
      if (this.addForm.programId) {
        dataUrl = "program/updateProgram";
      } else {
        dataUrl = "program/saveProgram";
      }
      if (this.OpenSaveAs) {
        dataUrl = "program/saveProgram";
      }
      const { data: res } = await this.$http.post(dataUrl, formData);
      if (res.result == "success") {
        this.$message({
          type: "success",
          message: res.message,
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
      this.arr = [];
      this.tableData = [];
      this.valueSize = "";
      this.overall = false;
      this.addForm.programName = "";
      this.addForm.programId = "";
      this.proportion = "";
      this.addForm.regionSize = "";
      this.disabled = true;
      this.TheMaterialProperties = "";
      this.clickRow = "";
      // this.addForm.programName=''
    },
    // 去重
    unique(arr) {
      var result = [];
      var obj = {};
      for (var i = 0; i < arr.length; i++) {
        if (!obj[arr[i].materialId]) {
          result.push(arr[i]);
          obj[arr[i].materialId] = true;
        } else {
          var _this = this;
          setTimeout(function () {
            _this.$message({
              message: "已有重复素材",
              type: "warning",
            });
          }, 1);
        }
      }
      return result;
    },
    // 选中的素材
    returnList(e) {
      let arrayMap = [];
      if (this.map1.get(this.materialKey)) {
        arrayMap = this.map1.get(this.materialKey);
      }
      this.map1.set(this.materialKey, this.unique(arrayMap.concat(e)));
      // this.map1.set(this.materialKey, arrayMap.concat(e));
      this.tableData = this.map1.get(this.materialKey);
      this.propertyStorage(e);
    },
    propertyStorage(e) {
      e.forEach((element, index) => {
        if (element.type == 4) {
          this.videoProperty.extend.playVoice = 10;
          this.videoProperty.materialOrder = this.materialKey;
          this.videoProperty.materialId = element.materialId;
          this.property.set(this.materialKey + "_" + element.materialId, {
            materialId: element.materialId,
            materialOrder: this.materialKey,
            areaId: this.materialKey,
            playTime: 0,
            extend: {
              playVoice: 10,
            },
          });
        } else if (element.type == 5) {
          this.videoProperty.extend.playVoice = 10;
          this.videoProperty.materialOrder = this.materialKey;
          this.videoProperty.materialId = element.materialId;
          this.property.set(this.materialKey + "_" + element.materialId, {
            materialId: element.materialId,
            materialOrder: this.materialKey,
            areaId: this.materialKey,
            playTime: 0,
            extend: {
              playVoice: 10,
            },
          });
        } else if (element.type == 1) {
          this.videoProperty.playTime = 10;
          this.videoProperty.extend.playVoice = 10;
          this.videoProperty.extend.switchMode = "标准";
          this.videoProperty.materialOrder = this.materialKey;
          this.videoProperty.materialId = element.materialId;
          this.property.set(this.materialKey + "_" + element.materialId, {
            playTime: 10,
            materialId: element.materialId,
            materialOrder: this.materialKey,
            areaId: this.materialKey,
            extend: {
              playVoice: 10,
              switchMode: "标准",
            },
          });
        } else if (element.type == 2) {
          this.videoProperty.extend.playVoice = 10;
          this.videoProperty.playTime = element.timeLenth;
          this.videoProperty.materialOrder = this.materialKey;
          this.videoProperty.materialId = element.materialId;
          this.property.set(this.materialKey + "_" + element.materialId, {
            playTime: this.videoProperty.playTime,
            materialId: element.materialId,
            materialOrder: this.materialKey,
            areaId: this.materialKey,
            extend: {
              playVoice: 10,
            },
          });
        } else if (element.type == 3) {
          this.textProperty.playTime = 60;
          this.textProperty.extend.size = 50;
          this.textProperty.extend.bgcolor = "#000";
          this.textProperty.extend.speed = 4;
          this.textProperty.extend.family = "宋体";
          this.textProperty.extend.color = "#ff0000";
          this.textProperty.extend.transparent = 0;
          this.textProperty.extend.direction = "静止";
          this.textProperty.materialOrder = this.materialKey;
          this.textProperty.materialId = element.materialId;
          this.property.set(this.materialKey + "_" + element.materialId, {
            playTime: 60,
            materialId: element.materialId,
            materialOrder: this.materialKey,
            areaId: this.materialKey,
            extend: {
              direction: "静止",
              size: 50,
              bgcolor: "#000",
              speed: 4,
              family: "宋体",
              color: "#ff0000",
              transparent: 0,
            },
          });
        }
      });
    },
    // 点击添加素材
    AddMaterial(name, id) {
      this.materialKey = id;
      setTimeout(() => {
        name["height1"] = this.showArr.height;
        name["width1"] = this.showArr.width;
        this.MaterialType = name;
      }, 10);
      this.openDialogTable = !this.openDialogTable;
    },
    acquireSize(id) {
      this.clickRow = "";
      this.tableData = this.map1.get(id);
      this.materialKey = id;
    },
    // 勾选数据
    selectListTable(selection, row, open) {
      // if (selection.length == 0) {
      //   this.TheMaterialProperties = "";
      //   this.clickRow = ''
      //   return;
      // }
      selection.forEach((e1) => {
        this.videoProperty.materialId = e1.materialId;
        this.textProperty.materialId = e1.materialId;
        if (e1.type == 4) {
          this.videoProperty.extend.playVoice = "";
          this.videoProperty.extend.playVoice = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.playVoice;
          this.propertyKey = this.materialKey + "_" + e1.materialId;
        } else if (e1.type == 5) {
          this.videoProperty.extend.playVoice = "";
          this.videoProperty.extend.playVoice = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.playVoice;
          this.propertyKey = this.materialKey + "_" + e1.materialId;
        } else if (e1.type == 1) {
          if (open == "open") {
            this.videoProperty.playTime = this.property.get(
              this.materialKey + "_" + e1.materialId
            ).playTime;
          }
          this.videoProperty.extend.switchMode = "";
          this.videoProperty.extend.switchMode = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.switchMode;
          this.propertyKey = this.materialKey + "_" + e1.materialId;
        } else if (e1.type == 2) {
          if (open == "open") {
            this.videoProperty.playTime = this.property.get(
              this.materialKey + "_" + e1.materialId
            ).playTime;
          }
          this.videoProperty.extend.playVoice = "";
          this.videoProperty.extend.playVoice = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.playVoice;
          this.propertyKey = this.materialKey + "_" + e1.materialId;
        } else if (e1.type == 3) {
          if (open == "open") {
            this.textProperty.playTime = "";
            this.textProperty.playTime = this.property.get(
              this.materialKey + "_" + e1.materialId
            ).playTime;
          }
          this.textProperty.extend.size = "";
          this.textProperty.extend.size = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.size;
          this.textProperty.extend.bgcolor = "";
          this.textProperty.extend.bgcolor = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.bgcolor;
          this.textProperty.extend.speed = "";
          this.textProperty.extend.speed = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.speed;
          this.textProperty.extend.family = "";
          this.textProperty.extend.family = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.family;
          this.textProperty.extend.color = "";
          this.textProperty.extend.color = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.color;
          this.textProperty.extend.transparent = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.transparent;
          this.textProperty.extend.direction = "";
          this.textProperty.extend.direction = this.property.get(
            this.materialKey + "_" + e1.materialId
          ).extend.direction;
        }
        this.propertyKey = this.materialKey + "_" + e1.materialId;
      });
      if (open !== "open") {
        this.RemoveSelectionArray = selection;
      }
      if (selection.length == 0 && open == "open") {
        this.videoProperty.playTime = "";
      }
      if (row && open == "open") {
        if (row.type == 2 && !this.property.get(this.propertyKey).playTime) {
          this.videoProperty.playTime = row.timeLenth;
        }
        this.TheMaterialProperties = row.type;
        this.clickRow = row;
      }
    },
    // 点击删除已选素材
    TheSelectedMaterial() {
      if (this.RemoveSelectionArray.length == 0) {
        this.$message({
          message: "请选择需要删除的数据",
          type: "warning",
        });
        return;
      }
      let temporary1 = [];
      let temporary2 = [];
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let map1arr = this.map1.get(this.materialKey);
          for (var i in this.RemoveSelectionArray) {
            if (
              this.RemoveSelectionArray[i].materialId ==
              this.clickRow.materialId
            ) {
              this.clickRow = "";
              this.TheMaterialProperties = "";
            }
            this.property.delete(
              this.materialKey + "_" + this.RemoveSelectionArray[i].materialId
            );
            temporary1[this.RemoveSelectionArray[i].materialId] = true;
          }
          for (var k in map1arr) {
            if (!temporary1[map1arr[k].materialId]) {
              temporary2.push(map1arr[k]);
            }
          }
          this.map1.set(this.materialKey, temporary2);
          this.tableData = temporary2;
          temporary1 = [];
          temporary2 = [];
          this.RemoveSelectionArray = [];
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 鼠标移入事件
    mouseenterIncident(e) {
      this.mouseenterId = e;
    },
    mouseleaveIncident() {
      // this.mouseenterId = "";
    },
    // 点击右键显示按钮
    showDraggablePrevent(e) {
      this.remove = e;
      this.$refs.ModuleBtn.forEach((element) => {
        if (element.id == e) {
          if (this.$refs.ModuleBtn[element.id].style.display == "none") {
            this.$refs.ModuleBtn[element.id].style.display = "block";
          } else {
            this.$refs.ModuleBtn[element.id].style.display = "none";
          }
        }
      });
    },
    // handleSizeChange(val) {
    //   this.query.pageSize = val;
    //   this.programList();
    // },
    // handleCurrentChange(val) {
    //   this.query.page = val;
    //   this.programList();
    // },
    // 使用模板
    accuracy() {
      if (!this.result) {
        this.$message({
          message: "请选择模板",
          type: "warning",
        });
        return;
      }
      // this.overall = true;
      // this.addDialogMake = false;
      this.nonuseModle();
    },
    // 不使用模板
    nonuseModle() {
      let array = "";
      this.valueSize = this.addForm.regionSize;
      // this.addForm.programName = this.addForm.programName;
      array = this.valueSize.split("*");
      this.curtain.width = array[0];
      this.curtain.height = array[1];
      this.overall = true;
      this.addDialogMake = false;
      this.tableData = [];
      this.DetermineTheSize();
    },
    // 判断尺寸
    DetermineTheSize() {
      this.$nextTick(() => {
        this.proportion = "";
        let clientWidth = this.$refs.boxTheSize.clientWidth;
        let clientHeight = this.$refs.boxTheSize.clientHeight;
        if (
          clientWidth > this.curtain.width &&
          clientHeight > this.curtain.height
        ) {
          this.curtain.width = this.curtain.width;
          this.curtain.height = this.curtain.height;
          this.proportion = 1;
        } else if (
          clientWidth > this.curtain.width / 2 &&
          clientHeight > this.curtain.height / 2
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 2);
          this.curtain.height = parseFloat(this.curtain.height / 2);
          this.proportion = 2;
        } else if (
          clientWidth > this.curtain.width / 4 &&
          clientHeight > this.curtain.height / 4
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 4);
          this.curtain.height = parseFloat(this.curtain.height / 4);
          this.proportion = 4;
        } else if (
          clientWidth > this.curtain.width / 6 &&
          clientHeight > this.curtain.height / 6
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 6);
          this.curtain.height = parseFloat(this.curtain.height / 6);
          this.proportion = 6;
        } else if (
          clientWidth > this.curtain.width / 8 &&
          clientHeight > this.curtain.height / 8
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 8);
          this.curtain.height = parseFloat(this.curtain.height / 8);
          this.proportion = 8;
        } else if (
          clientWidth > this.curtain.width / 10 &&
          clientHeight > this.curtain.height / 10
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 10);
          this.curtain.height = parseFloat(this.curtain.height / 10);
          this.proportion = 10;
        } else if (
          clientWidth > this.curtain.width / 12 &&
          clientHeight > this.curtain.height / 12
        ) {
          this.curtain.width = parseFloat(this.curtain.width / 12);
          this.curtain.height = parseFloat(this.curtain.height / 12);
          this.proportion = 12;
        }
      });
    },
    // 改变尺寸
    changeValueSize() {
      let array = "";
      array = this.valueSize.split("*");
      this.curtain.width = array[0];
      this.curtain.height = array[1];
      this.DetermineTheSize();
      this.arr = [];
      this.tableData = [];
      this.showArr.width = 0;
      this.showArr.height = 0;
      this.showArr.x = 0;
      this.showArr.y = 0;
      if (this.curtain.width * 1 >= this.curtain.height * 1) {
        //横屏
        this.addForm.isPass = true;
      } else {
        this.addForm.isPass = false;
      }
    },
    layoutBox1() {
      this.ifClick.ifClick2 = false;
      this.ifClick.ifClick3 = false;
      this.ifClick.ifClick4 = false;
      this.ifClick.ifClick1 = !this.ifClick.ifClick1;
      if (this.ifClick.ifClick1) {
        this.result = 1;
      } else {
        this.result = "";
      }
    },
    layoutBox2() {
      this.ifClick.ifClick1 = false;
      this.ifClick.ifClick3 = false;
      this.ifClick.ifClick4 = false;
      this.ifClick.ifClick2 = !this.ifClick.ifClick2;
      if (this.ifClick.ifClick2) {
        this.result = 2;
      } else {
        this.result = "";
      }
    },
    layoutBox3() {
      this.ifClick.ifClick1 = false;
      this.ifClick.ifClick2 = false;
      this.ifClick.ifClick4 = false;
      this.ifClick.ifClick3 = !this.ifClick.ifClick3;
      if (this.ifClick.ifClick3) {
        this.result = 3;
      } else {
        this.result = "";
      }
    },
    layoutBox4() {
      this.ifClick.ifClick1 = false;
      this.ifClick.ifClick3 = false;
      this.ifClick.ifClick2 = false;
      this.ifClick.ifClick4 = !this.ifClick.ifClick4;
      if (this.ifClick.ifClick4) {
        this.result = 4;
      } else {
        this.result = "";
      }
    },
    // 点击下一步
    nextStep() {
      if (this.repetition) {
        this.$message({
          type: "warning",
          message: "节目名重复请修改",
        });
        return;
      }
      if (!this.addForm.programName) {
        this.$message({
          type: "error",
          message: "请填写名称",
        });
        return;
      }
      if (!this.addForm.regionSize) {
        this.$message({
          type: "error",
          message: "请选择尺寸",
        });
        return;
      }
      this.ifNextStep = true;
      this.active = 2;
    },
    // 点击切换选项
    isPassClick() {
      this.addForm.isPass = !this.addForm.isPass;
      this.addForm.regionSize = "";
    },
    textPropertyClick() {
      if (this.textProperty.extend.transparent == 1) {
        this.textProperty.extend.transparent = 0;
      } else {
        this.textProperty.extend.transparent = 1;
      }
      this.property.set(this.propertyKey, {
        playTime: this.textProperty.playTime,
        // isPass: this.textProperty.isPass,
        materialId: this.textProperty.materialId,
        materialOrder: this.textProperty.materialOrder,
        extend: {
          size: this.textProperty.extend.size,
          family: this.textProperty.extend.family,
          color: this.textProperty.extend.color,
          bgcolor: this.textProperty.extend.bgcolor,
          speed: this.textProperty.extend.speed,
          direction: this.textProperty.extend.direction,
          transparent: this.textProperty.extend.transparent,
        },
      });
    },
    // 点击新增按钮
    openAddMake() {
      this.addDialogMake = true;
    },
    onResize: function (x, y, width, height, key) {
      this.arr[key].x = x;
      this.arr[key].y = y;
      this.arr[key].width = width;
      this.arr[key].height = height;
      for (let j = 0; j < this.arr.length; j++) {
        if (key == j) {
          const element = this.arr[j];
          this.showArr.x = parseFloat(element.x * this.proportion);
          this.showArr.y = parseFloat(element.y * this.proportion);
          this.showArr.width = parseFloat(element.width * this.proportion);
          this.showArr.height = parseFloat(element.height * this.proportion);
        }
      }
      if (this.valueSize == "1050*1680") {
        if (this.curtain.width * this.proportion == "1050") {
          this.calculateAdd(this.curtain.width);
        }
      }
    },
    onDrag: function (x, y, key) {
      this.arr[key].x = x;
      this.arr[key].y = y;
      for (let j = 0; j < this.arr.length; j++) {
        if (key == j) {
          const element = this.arr[j];
          this.showArr.x = parseFloat(element.x * this.proportion);
          this.showArr.y = parseFloat(element.y * this.proportion);
        }
      }
    },
    // 双向数据绑定，完成输入框的修改
    putDatax() {
      if (this.arr.length <= 0) {
        this.$message({
          message: "请选择区域",
          type: "warning",
        });
        return;
      }
      if (
        parseFloat(this.showArr.width) + parseFloat(this.showArr.x) >
        this.curtain.width * this.proportion
      ) {
        this.$message({
          message: "不能超出模板区域",
          type: "warning",
        });
        return;
      }
      for (let j = 0; j < this.arr.length; j++) {
        if (this.remove == j) {
          const element = this.arr[j];
          element.x = parseFloat(this.showArr.x) / parseFloat(this.proportion);
        }
      }
    },
    putDatay() {
      if (this.arr.length <= 0) {
        this.$message({
          message: "请选择区域",
          type: "warning",
        });
        return;
      }
      if (
        parseFloat(this.showArr.height) + parseFloat(this.showArr.y) >
        this.curtain.height * this.proportion
      ) {
        this.$message({
          message: "不能超出模板区域",
          type: "warning",
        });
        return;
      }
      for (let j = 0; j < this.arr.length; j++) {
        if (this.remove == j) {
          const element = this.arr[j];
          element.y = parseFloat(this.showArr.y / this.proportion);
        }
      }
    },
    putDataw() {
      // let wt =
      //   parseFloat(this.curtain.width) -
      //   (parseFloat(this.showArr.x) + parseFloat(this.showArr.width));
      if (this.arr.length <= 0) {
        this.$message({
          message: "请选择区域",
          type: "warning",
        });
        return;
      }
      for (let j = 0; j < this.arr.length; j++) {
        if (this.remove == j) {
          const element = this.arr[j];
          if (this.showArr.width > this.curtain.width * this.proportion) {
            this.$message({
              type: "warning",
              message: "请输入范围内的宽度",
            });
            return;
          }
          let curtain = this.curtain.width * this.proportion;
          let num24 = this.$refs.generateBoxRef[j].offsetWidth + 2;
          let wtSize = parseFloat(
            this.curtain.width * this.proportion -
              (num24 * this.proportion + this.showArr.x)
          );
          let abc =
            curtain -
            (parseFloat(this.showArr.x) + parseFloat(this.showArr.width));
          if (abc < 0) {
            this.$message({
              type: "warning",
              message: "你已超出范围内的宽度",
            });
            return;
          }
          element.width = parseFloat(this.showArr.width / this.proportion);
        }
      }
    },
    putDatah() {
      if (this.arr.length <= 0) {
        this.$message({
          message: "请选择区域",
          type: "warning",
        });
        return;
      }
      for (let j = 0; j < this.arr.length; j++) {
        if (this.remove == j) {
          const element = this.arr[j];
          if (this.showArr.height > this.curtain.height * this.proportion) {
            this.$message({
              type: "warning",
              message: "请输入范围内的宽度",
            });
            return;
          }
          let curtain = this.curtain.height * this.proportion;
          let num24 = this.$refs.generateBoxRef[j].offsetHeight + 2;
          let wtSize = parseFloat(
            this.curtain.height * this.proportion -
              (num24 * this.proportion + this.showArr.y)
          );
          let abc =
            curtain -
            (parseFloat(this.showArr.y) + parseFloat(this.showArr.height));
          if (abc < 0) {
            this.$message({
              type: "warning",
              message: "你已超出范围内的高度",
            });
            return;
          }
          element.height = parseInt(this.showArr.height / this.proportion);
        }
      }
    },
    // 点击增加
    addImg() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "图片区",
        areaType: 1,
        color: "#f24c4c",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    addv() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "视频区",
        areaType: 2,
        color: "pink",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    // 混合
    mixture() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "混合区",
        areaType: 9,
        color: "#4d9ce0",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    // 添加文本
    addText() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "文本区",
        areaType: 3,
        color: "#59cd80",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    // 添加流视频
    Permanent() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "流视频",
        areaType: 4,
        color: "#9b82d5",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    // 添加网页
    webpage() {
      var flag = this.NewTemplate();
      if (flag === false) {
        return;
      }
      this.judgeShow = true;
      this.arr.push({
        height: 100,
        width: 100,
        x: 0,
        y: 0,
        areaInfo: "网页",
        areaType: 6,
        color: "#fed459",
        layer: this.keyId,
        areaId: this.keyId++,
      });
      this.showArr.height = 100 * this.proportion;
      this.showArr.width = 100 * this.proportion;
    },
    // 点击切换
    lookId(i) {
      this.remove = i;
      this.TheMaterialProperties = "";
      for (let j = 0; j < this.arr.length; j++) {
        if (i == j) {
          const element = this.arr[j];
          this.showArr.x = parseFloat(element.x * this.proportion);
          this.showArr.y = parseFloat(element.y * this.proportion);
          this.showArr.height = parseFloat(element.height * this.proportion);
          this.showArr.width = parseFloat(element.width * this.proportion);
        }
      }
    },
    // 删除布局
    removeDiv(id) {
      this.$confirm("此操作将删除该模块, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.map1.delete(id);
          let keyNum = "";
          let property = [];
          this.property.forEach(function (value, key, map) {
            keyNum = key.split("_");
            if (parseFloat(keyNum[0]) == id) {
              property.push(key);
            }
          });
          property.forEach((element) => {
            this.property.delete(element);
          });
          this.judgeShow = false;
          this.arr.splice(this.mouseenterId, 1);
          this.showArr = {
            height: 0,
            width: 0,
            x: 0,
            y: 0,
          };
          this.TheMaterialProperties = "";

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });

      // this.tableData = [];
    },
    // 区域全屏
    RegionalFullScreen() {
      if (!this.overall) {
        return;
      }
      if (this.arr.length == 0) {
        this.$message({
          type: "warning",
          message: "请先选择模板",
        });
        return;
      }
      if (this.remove === "") {
        this.$message({
          type: "warning",
          message: "请先选择需要全屏的数据",
        });
        return;
      }
      if (this.valueSize == "1050*1680") {
        if (this.curtain.width * this.proportion == "1050") {
          this.calculateAdd(this.curtain.width);
        }
      }
      // else if (this.valueSize == "1366*726") {
      //   if (
      //     this.curtain.width * this.proportion == "1366" &&
      //     this.curtain.height * this.proportion == "726"
      //   ) {
      //     this.calculateAdd(this.curtain.width);
      //     // this.curtain.height = this.curtain.height + 2 / this.proportion;
      //   }
      // } else if (this.valueSize == "1366*768") {
      //   if (this.curtain.width * this.proportion == "1366") {
      //     this.calculateAdd(this.curtain.width);
      //   }
      // } else if (this.valueSize == "1050*1680") {
      //   if (this.curtain.width * this.proportion == "1050") {
      //     this.calculateAdd(this.curtain.width);
      //   }
      // }
      this.arr.forEach((element, index) => {
        if (this.remove == index) {
          this.curtain.width = parseInt(this.curtain.width); //宽高只能识别整数 小数不能处理
          element.width = this.curtain.width;
          element.height = this.curtain.height;
          element.x = 0;
          element.y = 0;
          this.showArr.x = 0;
          this.showArr.y = 0;
          this.showArr.height = this.curtain.height * this.proportion;
          if (this.valueSize == "1050*1680") {
            this.calculateSubtract(this.curtain.width);
            return;
          }
          // else if (this.valueSize == "1366*726") {
          //   this.calculateSubtract(this.curtain.width);
          //   this.showArr.height = this.curtain.height * this.proportion - 2;
          //   return;
          // } else if (this.valueSize == "1366*768") {
          //   this.calculateSubtract(this.curtain.width);
          //   return;
          // } else if (this.valueSize == "1050*1680") {
          //   this.calculateSubtract(this.curtain.width);
          //   return;
          // }
          this.showArr.width = this.curtain.width * this.proportion;
        }
      });
    },
    numMulti(num1, num2) {
      //乘法运算，避免数据相乘小数点后产生多位数和计算精度损失。
      var baseNum = 0;
      try {
        baseNum += num1.toString().split(".")[1].length;
      } catch (e) {}
      try {
        baseNum += num2.toString().split(".")[1].length;
      } catch (e) {}
      return (
        (Number(num1.toString().replace(".", "")) *
          Number(num2.toString().replace(".", ""))) /
        Math.pow(10, baseNum)
      );
    },
    calculateAdd(num) {
      this.curtain.width = num + 2 / this.proportion;
      return;
    },
    calculateSubtract(num) {
      this.showArr.width = num * this.proportion - 2;
      return;
    },
    NewTemplate() {
      if (this.arr.length > 9) {
        this.$message({
          message: "最多添加10个模板",
          type: "warning",
        });
        return false;
      }
      if (!this.curtain.width) {
        this.$message({
          message: "请先新建模板",
          type: "warning",
        });
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
// /deep/.has-gutter .el-checkbox {
//   display: none;
// }
.topDown {
  display: flex;
  justify-content: center;
  .el-button.is-circle {
    padding: 6px !important;
  }
}
.programBtn {
  text-align: center;
  padding: 20px 0 10px;
  .el-button {
    padding: 12px 25px;
    background-color: #2183d8;
  }
}
.excursion_box {
  margin: 0 auto;
  padding-top: 20px;
}
.colorSelect {
  position: absolute;
  border: 1px solid #dcdfe6;
  z-index: 1000;
  width: 58%;
  height: 38px;
  .m-colorPicker {
    padding-left: 30%;
    padding-top: 10px;
  }
}
.rightList2 {
  .el-table:last-child {
    padding-top: 0;
  }
}
.propertyPaly {
  padding: 12px 5px 0;
  /deep/.el-input__inner {
    border-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  /deep/.el-input-group__prepend {
    padding: 0 15px;
  }
  .propertyPaly_text {
    width: 100%;
    height: 40px;
    background-color: #f5f7fa;
    color: #909399;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    border-right: none;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.lucency {
  padding: 12px 5px 1px;
  text-align: center;
  line-height: 39px;
  font-size: 14px;
  overflow: hidden;
  //  margin-bottom: 12px;
}
// 打开节目
.Material_r {
  display: flex;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid #eee;
  /deep/.el-input {
    width: 30%;
  }
  /deep/.el-button {
    margin: 0 0 0 20px;
    height: 40px;
    background-color: #2183d8;
  }
}
// 使用模板后
.drawing {
  width: 100%;
  height: 600px;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  margin-top: 1.8%;
  padding-bottom: 15px;
  .generate {
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .drawing_box {
    width: 97%;
    height: 90%;
    margin: 15px 1.5% 0;
    background: #e2e2e2;
    .drawing_module {
      width: 100%;
      height: 100%;
      .drawing_mixture {
        text-align: center;
      }
    }
    .activity {
      position: relative;
      background-color: #cacccd;
      left: 50%;
      transform: translateX(-50%);
    }
    .activity:hover {
      border: 1px solid rgb(77, 156, 224, 0.5);
      box-sizing: border-box;
    }
    .drawing_module_btn {
      // position: absolute;
      // top: 40%; /*偏移*/
      // left: 50%;
      // transform: translateY(-50%);
      // transform: translateX(-50%);
      text-align: center;
      .el-button {
        opacity: 0.5;
        color: #fff;
        background-color: #000;
        font-size: 12px;
        padding: 5px 8px;
      }
    }
  }
  // 底部尺寸数据
  .SizeData {
    display: flex;
    justify-content: center;
    margin-top: 15px;
    .sizeInput {
      width: 60px;
      height: 38px;
      line-height: 38px;
      border: 1px solid #eee;
      border-radius: 3px;
      margin: 0 15px;
      padding-left: 8px;
      color: #888;
      font-size: 14px;
      input {
        float: right;
        width: 65%;
        height: 38px;
        border: none;
        box-sizing: border-box;
      }
    }
  }
}
// 选择模板
.stlyeBox {
  border: 1px solid #2183d8 !important;
}
.sample {
  .sampleUl {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
    li {
      border: 1px solid #eee;
      width: 20%;
      height: 100%;
      .sampleUl_box,
      .sampleUl_box1,
      .sampleUl_box2,
      .sampleUl_box3 {
        width: 60%;
        height: 100%;
        box-sizing: border-box;
        border: 1px solid #2183d8;
        background-color: #f2faff;
        margin: 0 20%;
      }
      .sampleUl_box1 {
        .box1_box {
          width: 100%;
          height: 50%;
          background-color: #2183d8;
        }
      }
      .sampleUl_box2 {
        display: flex;
        align-items: center;
        .box2_box {
          width: 100%;
          height: 33.33%;
          background-color: #2183d8;
        }
      }
      .sampleUl_box3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
          height: 25%;
        }
        .box3_box1 {
          width: 100%;
          height: 25%;
          background-color: #2183d8;
        }
        .box3_box2 {
          width: 100%;
          height: 25%;
          background-color: #2183d8;
        }
      }
    }
  }
  .sampleUl_text {
    width: 100%;
    display: flex;
    margin-bottom: 20px;
    justify-content: space-around;
  }
  .sample_btn {
    padding: 0 0 30px;
    width: 100%;
    text-align: center;
  }
}
.addClass {
  background-color: #4d9ce0 !important;
  color: #fff !important;
}
// 新增对话框
.addDialogForm {
  .ifpass {
    position: absolute;
    right: 0;
    top: 0;
    width: 40%;
    cursor: pointer;
    margin: 0 0 0 20px;
    text-align: center;
  }
  .addClass {
    background-color: #4d9ce0 !important;
    color: #fff !important;
  }
  .formButton {
    text-align: center;
    padding-right: 10%;
    padding-top: 40px;
    .el-button {
      width: 100px;
    }
  }
  .opinion {
    /deep/.el-form-item__label {
      height: 80px;
      line-height: 80px;
    }
  }
  /deep/.el-textarea__inner {
    height: 80px;
  }
  /deep/.el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }
  /deep/.el-form-item__label {
    background-color: #efefef;
    border-radius: 0;
    height: 40px;
    border: 1px solid #dcdfe6;
    border-right: none;
    box-sizing: border-box;
    text-align: center;
    padding-left: 10px;
  }
  /deep/.el-input__inner,
  /deep/.el-textarea__inner {
    border-radius: 0;
  }
}
.fabricationdata {
  // 右边数据
  .rightList1,
  .rightList2 {
    height: 60px;
    width: 90%;
    margin: 0 5% 5%;
    background-color: #fff;
    border-radius: 5px;
    padding: 20px 15px;
    line-height: 30px;
  }
  .rightList2 {
    height: 250px;
    padding: 10px;
    .rightList2Head {
      width: 100%;
      height: 35px;
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      .el-button {
        float: right;
        background-color: #f2faff;
        color: #2183d8;
        font-size: 18px;
        padding: 6px;
      }
    }
  }
  // 左边数据
  .cruxButton {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 150px;
    /deep/.el-button {
      width: 150px;
      // padding-left: 10px;
      padding: 15px 5px;
      margin: 5px 0;
    }
  }
  // 头部按钮
  .titleBtn {
    height: 80px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px 10px;
    .saveBtn {
      float: left;
      border: 1px dashed #ccc;
      border-radius: 5px;
      padding: 15px 15px;
    }
    .saveBtn1 {
      margin-left: 30px;
      float: left;
      border: 1px dashed #ccc;
      border-radius: 5px;
      padding: 15px 10px;
    }
    .el-button {
      background-color: #f2faff;
      width: 50px;
      height: 50px;
      border: none;
      padding: 0;
      border-radius: 50%;
      img {
        width: 26px;
        height: 26px;
      }
    }
    /deep/.el-button:hover {
      background-color: #f2f2f2;
    }
  }
  .inputStyel {
    span {
      padding: 0 10px;
      input {
        width: 50px;
      }
    }
  }
  width: 100%;
  .draggable {
    background-color: #ccc;
  }
  .box {
    min-height: 600px;
    background-color: #fff;
    text-align: center;
    .box_box {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      #dragIcon {
        float: right;
        margin-top: 85px;
        width: 15px;
        height: 15px;
        background-color: red;
        cursor: pointer;
      }
    }
    .button_center {
      padding-top: 250px;
    }
  }
}
/deep/.el-button {
  margin-left: 0;
  margin: 0 5px;
}
/deep/.el-steps {
  padding: 0 30% 15px;
}
/deep/.el-dialog__body {
  padding: 10px 15px;
}
// /deep/.el-table th,
// .el-table tr {
//   background-color: #fafafa;
// }
/deep/.el-dialog__header {
  background-color: #efefef;
  padding: 0;
  line-height: 50px;
  padding-left: 20px;
  color: #333;
  font-size: 16px;
}
/deep/.el-table {
  margin-top: 20px;
}
/deep/.el-table th,
.el-table tr {
  background-color: #fafafa;
}
/deep/.el-table:last-child {
  padding-top: 20px;
  // padding-bottom: 50px!important;
}
/deep/.el-pager li,
/deep/.el-pagination .btn-next,
/deep/ .el-pagination .btn-prev {
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 0 5px;
  color: #333;
  padding: 0;
}
/deep/.el-progress-bar__inner {
  background-color: #5ecc8f;
}
/deep/.el-pager li.active {
  background-color: #2183d8;
  color: #fff;
}
/deep/.el-pagination__sizes {
  padding-left: 20px;
}
/deep/.el-tag {
  padding: 0 20px;
  cursor: pointer;
  border: 1px solid #409eff;
}
.selected_draggable {
  background-image: url(../../assets/images/yes_03.png);
  background-repeat: no-repeat;
  background-position: top right;
}
</style>
